<template>
  <div class="headerSearch">
  <!-- <div class="inputGroup">
      <a-input-group compact>
        <a-select default-value="CAD文档" style="width: 110px">
          <a-select-option value="CAD文档">
            CAD文档
          </a-select-option>
          <a-select-option value="CAD文档">
            CAD文档
          </a-select-option>
        </a-select>
        <div class="divider"><span class="lineShape"></span></div>
        <a-input-search
          placeholder="请输入搜索条件"
          @search="onSearch"
          style="width: 200px"
        />
      </a-input-group>
    </div> -->
    <div class="rightContainer">
     <!-- <div class="seniorSearch">高级搜索</div>
      <div class="iconText">
        <a-icon type="carry-out" class="iconfont" />
        <span class="lateSay">最近访问</span>
      </div>
      <div class="iconText">
        <a-icon type="link" class="iconfont" />
        <span class="lateSay">快速链接</span>
      </div>-->
      <!-- <a-select
        :value="lang"
        style="width:100px; margin-right:5px;"
        @change="changeLang"
        class="select-language"
      >
        <a-select-option v-for="(item, index) in optionsData" :value="item.value" :key="index">{{item.name}}</a-select-option>
      </a-select> -->
      
      <!-- 搜索 -->
      <a-input-search
        v-model="searchValue"
        placeholder="请输入搜索条件"
        @search="onSearch"
        style="width: 200px;border-radius: 4px;margin-right: 5px;line-height: 40px;"
      />
      <!-- <div class="theme-box">
        <a-tooltip >
          <template slot="title">
            <div style="width: 100%;display: flex;">
              <a-tooltip  v-for="(item, index) in colorList" :key="index">
                <template slot="title">
                  {{ item.key }}
                </template>
                <a-tag :color="item.color" style="height: 20px" @click="changeColor(item.color)">
                  <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
                </a-tag>
              </a-tooltip>
            </div>
          </template>
          <img style="hight:25px;width:25px;margin-right: 5px;" src="@/assets/img/theme.png" alt="">
        </a-tooltip>
      </div> -->
      <div class="rightSuper">
        <!-- <a-dropdown placement="bottomCenter" overlayClassName="overlay"> -->
          <div class="super">
            <!--<a-icon type="smile" class="iconfont" />-->
            <img :src="userMessage ? userMessage.picUrl : imgUrl" class="superImg"/>
            <a-popover overlayClassName="superPop" placement="bottomRight">
              <template slot="content">
                <div class="popContent">
                  <div class="leftContent">
                  <img :src="userMessage ? userMessage.picUrl : imgUrl" class="leftImg"/>
                  </div>
                  <div class="rightContent">
                    <div class="lable">{{ $t('userInfo.infoName') }}： <span class="labelValue">{{userinfo.realName}}</span></div>
                    <div class="lable">{{ $t('userInfo.infoPost') }}： <span class="labelValue">{{userMessage ? userMessage.stdPositionName : "---"}}</span></div>
                    <div class="lable">{{ $t('userInfo.infoClass') }}： <span class="labelValue">{{userMessage ? `${userMessage.org3Name}-${userMessage.org4Name}-${userMessage.org5Name}` : "---"}}</span></div>
                  </div>
                </div>
                <div class="divider"></div>
                <div class="exit" @click="exitLogin">{{ $t('userInfo.logOut') }}</div>
              </template>
              
              <span class="superPeople">
                {{userinfo.realName}}
                <a-icon type="down" class="iconfontDown" /></span>
            </a-popover>
            
          </div>
        <!--  <a-menu slot="overlay" style="top: -15px;">
            <a-menu-item>
              <a href="javascript:;">个性设置</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>-->
      </div>
      <!-- 国际化 -->
      <!-- <a-dropdown style="margin-right:5px;" placement="bottomRight">
        <a-icon type="global" class="ant-dropdown-link" @click="e => e.preventDefault()" />
        <a-menu slot="overlay" @click="changeLang">
          <a-menu-item  v-for="(item, index) in optionsData" :key="index">
            <a href="javascript:;">{{item.name}}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown> -->
      <!-- 个性化 -->
      <a-popover style="margin-right:5px;" v-model="setVisible" trigger="click" placement="bottomRight">
        <span style="font-size: 16px; font-weight: bold;" slot="title">{{ $t('theme.title') }}</span>
        <a-tooltip placement="bottomRight">
          <template slot="title">
            {{ $t('theme.title') }}
          </template>
          <a-icon style="cursor: pointer;" type="setting" />
        </a-tooltip>
        <template slot="content">
          <div class="setting">
            <div class="langBox">
              <div class="langTitle">
                {{ $t('theme.langTitle') }}
              </div>
              <div class="langContent">
                <a-radio-group :default-value="lang" button-style="solid" @change="langChange">
                  <a-radio-button value="zh">
                    {{ lang == 'zh' ? '中文' : 'Chinese'}}
                  </a-radio-button>
                  <a-radio-button value="en">
                    {{ lang == 'zh' ? '英文' : 'English'}}
                  </a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <div class="colorTheme">
              <div class="colorTitle">{{ $t('theme.themeColor') }}</div>
              <div style="width: 100%;display: flex;">
                <a-tooltip v-for="(item, index) in colorList" :key="index">
                  <template slot="title">
                    {{ item.key }}
                  </template>
                  <a-tag :color="item.color" style="height: 20px; cursor: pointer;" @click="changeColor(item.color)">
                    <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
                  </a-tag>
                </a-tooltip>
              </div>
            </div>
            <div class="fontSetting">
              <div class="fontTitle">
                {{ $t('theme.fontSet') }}
              </div>
              <div class="fontContent">
                <a-button @click="fontSet('small')" class="fontButton fontsSmall">{{ $t('theme.fontSmall') }}</a-button>
                <a-button @click="fontSet('normal')" class="fontButton fontsNomal">{{ $t('theme.fontNormal') }}</a-button>
                <a-button @click="fontSet('big')" class="fontButton fontsBig">{{ $t('theme.fontBig') }}</a-button>
                <a-button @click="fontSet('super')" class="fontButton fontsSuper">{{ $t('theme.fontSuper') }}</a-button>
              </div>
            </div>
          </div>
        </template>
      </a-popover>
    </div>
    
    <common-modal titleModal="系统搜索" :visibleModal="visibleModal" @handleOk="handleOk" @handleCancel="handleCancel" :widthModal="900" class="searchModal">
      <a-spin :spinning='showTable'>
          <common-table
          :columns="columns"
          :tableData="tableData"
          :isRowsSelectVisible="isRowsSelectVisible"
          :selectType="selectType"
          @selectedRows="selectedRows"
          @routerPage="routerPage"
          :loadVisible="loadVisible"
        ></common-table>
        </a-spin>
    </common-modal>
  </div>
</template>
<script>
// import { loginOut } from '@/api/loginOut.js'
import { searchAccountMiddle } from "@api/singleProject"
import { systemSearch } from "@api/projectReview"
import commonModal from "@/components/singlePage/commonModal"
import commonTable from "@/components/common/commonTable"
import { updateTheme, colorList } from './setting'
import { mapState, mapActions } from 'vuex'
import config from '@/defaultSettings'
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
export default {
  name: "headerSearch",
  components: {
    commonModal,
    commonTable
  },
  data() {
    return {
      userinfo: JSON.parse(sessionStorage.getItem('userInfo')),
      userMessage: {},
      imgUrl: require("@assets/img/logo.png"),
      visibleModal: false,
      showTable: false,
      columns:  [
        {
          title: "编号",
          displayName: "编号",
          dataIndex: "number",
          name: "number",
          key: "number",
          fieldType: "Input",
          fieldValue: null,
          dataType: "Number",
          width: 80,
          align: "left",
          scopedSlots: {
            title: "number",
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
            customRender: "customRender"
          }
        },
        {
          title: "项目名称",
          displayName: "项目名称",
          dataIndex: "projectName",
          name: "projectName",
          key: "projectName", 
          align: "left",
          width: 150,
        },
        {
          title: "名称",
          displayName: "名称",
          dataIndex: "name",
          name: "name",
          key: "name", 
          align: "left",
          width: 150,
          scopedSlots: {
            customRender: "name"
          }
        },
        {
          title: "类型",
          displayName: "类型",
          dataIndex: "type",
          name: "type",
          key: "type",
          width: 90,
          fieldType: "Input",
          fieldValue: null,
          dataType: "String",
          align: "left",
        },
        {
          title: "状态",
          displayName: "状态",
          dataIndex: "state",
          name: "state",
          key: "state",
          align: "left",
          width: 70,
        },
      ],
      tableData: [],
      searchValue: "",
      selectType: 'checkbox',
      isRowsSelectVisible: true, // 是否显示表格的选择列
      hasSelectTableData: [],
      loadVisible: false,
      colorList,
      primaryColor: this.$store.state.commonData.primaryColor,
      setVisible: false,
    };
  },
  computed: {
    ...mapState({
      lang: (state) => state.i18nData.lang
    }),
    optionsData() {
      if (this.lang === 'zh') {
        return [{ name: '简体中文', value: 'zh' }, { name: '英文', value: 'en' }]
      } else {
        return [{ name: 'Chinese', value: 'zh' }, { name: 'English', value: 'en' }]
      }
    }
  },
  mounted() {
    // 当主题色不是默认色时，才进行主题编译
    // if (this.primaryColor !== config.primaryColor) {
    //   this.primaryColor = config.primaryColor
    //   updateTheme(config.primaryColor)
    // }
    // let newList = []
    // newList.push(JSON.parse(sessionStorage.getItem('userInfo')).loginName)
    let params = {
      // account: userinfo.loginName
    }
    searchAccountMiddle(params).then(res=>{
      if(res.status === 200){
        // if(res.data.length > 0){
          // let newData = JSON.stringify(res.data[0])
          // sessionStorage.setItem('userMessage', newData)
          this.userMessage = res.data
        // }
      }
    })
  },
  methods: {
    ...mapActions(['setLang']),
    langChange (e) {
      console.log(e.target.value);
      this.$i18n.locale = e.target.value
      this.setLang(e.target.value)
    },
    changeLang (val) {
      console.log(this.optionsData[val.key].value)
      this.$i18n.locale = this.optionsData[val.key].value
      this.setLang(this.optionsData[val.key].value)
    },
    changeColor (color) {
      this.setVisible = false
      this.primaryColor = color
      this.$store.commit('SETPRIMARYCOLOR', color)
      // this.$store.dispatch('ToggleColor', color)
      updateTheme(color)
      // if (this.primaryColor !== color) {
      // }
    },
    
    /**字体大小 */
    fontSet(val) {
      switch (val) {
        case 'small':
          this.fontSetStyle(0.8)
          break;
        case 'normal':
          this.fontSetStyle(1)
          break;
        case 'big':
          this.fontSetStyle(1.2)
          break;
        case 'super':
          this.fontSetStyle(1.5)
          break;
        default:
          break;
      }
    },
    fontSetStyle(val) {  
      this.setVisible = false
      document.body.style.zoom = val;
      document.body.style.cssText += '; -moz-transform: scale(' + val + ');-moz-transform-origin: 0 0; ';   
    },
    onSearch() {
      this.visibleModal = true
      let params = {
        userId: this.userinfo.loginName,
        searchKey: this.searchValue
      }
      systemSearch(params).then(res=>{
        if(res.status === 200){
          if(res.data.success){
            this.tableData = res.data.data
          }
        }
      })
    },
    exitLogin() {
      let apiUrl = process.env.VUE_APP_API_URL
      let token = sessionStorage.getItem('authorToken')
      window.location.href = `${apiUrl}/oauth/logout?access_token=${token}`
      // window.location.href = 'http://casserver.dbp-test.sany.com.cn:32368/logout'
      // window.location.href = `${apiUrl}/oauth/oauth/authorize?response_type=token&client_id=client&redirect_uri=${encodeURIComponent(webUrl)}`
    },
    handleOk() {
      this.visibleModal = false
      this.searchValue = ""
    },
    handleCancel(){
      this.visibleModal = false
      this.searchValue = ""
    },
    // 选中数据
    selectedRows(val) {
      this.hasSelectTableData = val
    },
    routerPage(record) {
      setTimeout(() => {
        this.visibleModal = false
      }, 1000);
      
      let projectObj = {
        projectName: record.projectName,
        projectType: record.projectType
      }
      let projectOid = record.projectOid.split(':')[2]
      const url = window.location.protocol + '//' + window.location.host
      if(record.oid.indexOf('WTDocument') > -1){
        let newRecord= JSON.parse(JSON.stringify(record))
        delete newRecord.link
        window.open(url + "/#/single/fileSingle/examineProject?to=sigleFile&oid=" + projectOid + "&newWin=true&projectObj=" + JSON.stringify(projectObj) + "&title=项目文件&reviewId=" + record.oid + '&fileRecord=' + JSON.stringify(newRecord), "_blank")
      }else if(record.oid.indexOf('PIReview') > -1){
        window.open(url + "/#/single/reviewSingle/seeReview?oid=" + projectOid + "&newWin=true&projectObj=" + JSON.stringify(projectObj) + "&title=查看评审&reviewId=" + record.oid, "_blank")
      }else if(record.oid.indexOf('ProjectKnotItemBook') > -1){
        let doneList = {
          oid: record.oid,
          state: record.state
        }
        window.open(url + "/#/single/projectAcceptList/porjectAcceptDetail?oid=" + projectOid + "&newWin=true&projectObj=" + JSON.stringify(projectObj) + "&title=查看验收表&doneList=" + JSON.stringify(doneList), "_blank")
      }else if(record.oid.indexOf('GroupPlanningBook') > -1 || record.oid.indexOf('InstitutePlanningBook') > -1){
         window.open(url + "/#/projectPlanningDoc/checkInstituteBook?planOid=" + record.oid + "&newWin=true&planType=" + record.type + "&title=查看项目规划书", "_blank")
      }else if(record.oid.indexOf('TechnologyPlanningBook') > -1 || record.oid.indexOf('ProductPlanningBook') > -1){
         window.open(url + "/#/projectPlanningDoc/checkProductBook?planOid=" + record.oid + "&newWin=true&planType=" + record.type + "&title=查看项目规划书", "_blank")
      }else if(record.oid.indexOf('PIProjectRisk') > -1){
        window.open(record.link, "_blank")
        
      }else if(record.oid.indexOf('PIProjectIssue') > -1){
        window.open(record.link, "_blank")
      }else if(record.oid.indexOf('PIProjectChangeRequest') > -1){ 
        window.open(record.link, "_blank")
      }else if(record.oid.indexOf('PIProject') > -1){
        window.open(url + "/#/single/projectMain?oid=" + projectOid + "&newWin=true&projectObj=" + JSON.stringify(projectObj) + "&title=单项目首页&type=" + record.type, "_blank")
      }else if(record.oid.indexOf('ProjectTaskBook') > -1){
        window.open(url + "/#/single/projectPaper/mainTaskBook?oid=" + projectOid + "&newWin=true" + "&projectObj=" + JSON.stringify(projectObj) + "&title=任务书主页面", "_blank")
      }
    },
  }
};
</script>
<style lang="less" scoped>
  /deep/ .ant-tooltip{
    max-width: 270px!important;
  }
  .headerSearch {
    // margin-right: -50px;
    // margin-top: 15px;
    display: flex;
    // justify-content: flex-end;
    .theme-box{
      text-align: center;
      height: 23px;
      display: flex;
      width: 30px;
      margin-top: -2px;
      cursor: default;
    }
    .inputGroup {
      /deep/ .anticon {
        color: #666;
        margin-left: 10px;
      }
      .divider {
        .lineShape {
          width: 2px;
          height: 20px;
          margin-top: 6px;
          background: #999;
          display: inline-block;
        }
        width: 3px;
        height: 32px;
        background: #fff;
      }
      /deep/ .ant-input:focus {
        border-left: 0px !important;
      }
      /deep/ .ant-select-focused .ant-select-selection,
      .ant-select-selection:focus,
      .ant-select-selection:active {
        border-right: 0px !important;
      }
    }
    .rightContainer {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: 20px;
      .seniorSearch {
        font-size: 14px;
        color: #fff;
        line-height: 32px;
        width: 100px;
        cursor: pointer;
        // width: 15%;
        // margin-left: -15px;
      }
      .iconText {
        width: 150px;
        margin-top: -15px;
        cursor: pointer;
        .lateSay {
          font-size: 14px;
          color: #fff;
          line-height: 32px;
        }
      }
      .rightSuper {
        // width: 160px;
        // display: flex;
        // justify-content: flex-start;
        // cursor: pointer;
        // margin-right: 10px;
        .super {
          // width: 80%;
          // margin-top: -20px;
          // margin-right: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-right: 10px;
          .superImg{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
          }
        }
        .superPeople {
          // width: 100px;
          font-size: 14px;
          color: #fff;
          line-height: 32px;
          // margin-right: 6px;
          cursor: pointer;
        }
        .iconfontDown {
          font-size: 14px;
          color: #fff;
          margin: 10px 0px 0 6px;
          // cursor: pointer;
        }
      }
    }
    .iconfont {
      font-size: 20px;
      color: #fff;
      margin: 5px;
    }
    // /deep/ .ant-input {
    //   border-top-right-radius: 25px !important;
    //   border-bottom-right-radius: 25px !important;
    //   border-left: 0px;
    // }
    // /deep/ .ant-select-selection {
    //   border-top-left-radius: 25px !important;
    //   border-bottom-left-radius: 25px !important;
    //   border-right: 0px;
    // }
  }
</style>
<style scoped>
  .colorTheme, .langBox {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 12px;
    margin-bottom: 10px;
  }
  .colorTitle, .fontTitle, .langTitle {
    margin-bottom: 6px;
  }
  /* .fontSetting {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 12px;
    margin-bottom: 10px;
  } */
  .fontButton {
    margin-right: 5px;
  }
  .fontsSmall {
    font-size: 10px;
  }
  .fontsNomal {
    font-size: 12px;
  }
  .fontsBig {
    font-size: 14px;
    font-weight: 600;
  }
  .fontsSuper {
    font-size: 16px;
    font-weight: bold;
  }
</style>
<style lang="less">
  .overlay {
    min-width: 100px !important;
  }
  .superPop{
    .ant-popover-arrow{
      bottom: 6px!important;
      // border: 6px!important;
      border-top-color: #fff;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: #fff;
    }
    .ant-popover-inner-content{
      padding: 10px 16px;
    }
    .popContent{
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
      .leftContent{
        // width: 50px;
        padding: 10px 0;
        .leftImg{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .rightContent{
        margin-left: 20px;
        .lable{
          color: #999;
          font-size: 12px;
          line-height: 26px;
        }
        .labelValue{
          color: #333;
          font-size: 12px;
        }
      }
    }
    .divider{
      border-bottom: 1px dashed #e4e4e4;
    }
    .exit{
      padding-top: 10px;
      font-size: 14px;
      color: #386bd7;
      text-align: center;
      cursor: pointer;
    }
    
  }
  .searchModal{
    .commonTable .ant-table-body{
      overflow-x: hidden !important;
    }
    .ant-modal-body{
      max-height: 458px;
      overflow: scroll;
    }
  }
</style>